<template>
  <div class="cloud-roaming">
    
    <!-- 装饰背景 -->
    <div class="decoration-background"></div>
    
    <!-- 右上角返回按钮 -->
    <img @click="goBack" src="../assets/bottom.png" alt="返回" class="top-right-btn" />
    
    <!-- 顶部固定 yunshang 图标 -->
    <div class="top-yunshang">
      <img src="../assets/yunshang.png" alt="云上" class="yunshang-image" />
    </div>
    
    <!-- 功能区域划分 -->
    <div class="function-areas">
      <!-- 左侧区域 - 三等分 -->
      <div class="left-area">
            <div class="left-sub-area">
              <div class="area-content">
                <!-- 左侧1区域 - 添加图片 -->
                <img src="../assets/1@2x.png" alt="图片1" class="area-image" />
              </div>
            </div>
            <div class="left-sub-area">
              <div class="area-content">
                <!-- 左侧2区域 - 添加图片2 -->
                <img src="../assets/2@2x.png" alt="图片2" class="area-image" />
              </div>
            </div>
            <div class="left-sub-area">
              <div class="area-content">
                <!-- 左侧3区域 - 添加图片3 -->
                <img src="../assets/3@2x.png" alt="图片3" class="area-image" />
              </div>
            </div>
      </div>
      
      <!-- 中间区域 -->
      <div class="center-area">
        <!-- 中间区域无框，直接显示内容 -->
      </div>
      
      <!-- 右侧区域 - 三等分 -->
      <div class="right-area">
            <div class="right-sub-area">
              <div class="area-content">
                <!-- 右侧1区域 - 添加图片4 -->
                <img src="../assets/4@2x.png" alt="图片4" class="area-image" />
              </div>
            </div>
            <div class="right-sub-area">
              <div class="area-content">
                <!-- 右侧2区域 - 添加图片5 -->
                <img src="../assets/5@2x.png" alt="图片5" class="area-image" />
              </div>
            </div>
            <div class="right-sub-area">
              <div class="area-content">
                <!-- 右侧3区域 - 添加图片6 -->
                <img src="../assets/6@2x.png" alt="图片6" class="area-image" />
              </div>
            </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CloudRoaming',
  methods: {
    goBack() {
      // 返回上一页
      this.$router.go(-1);
    }
  }
}
</script>

<style scoped>
.cloud-roaming {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.decoration-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../assets/v2_sg2smy.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0.9;
}


/* 右上角返回按钮 */
.top-right-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 20;
  width: 50px;  /* 从80px缩小到76px (95%) */
  height: 50px; /* 从80px缩小到76px (95%) */
  object-fit: contain;
  cursor: pointer;
  transition: all 0.3s ease;
}

.top-right-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* 顶部固定 yunshang 图标 */
.top-yunshang {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 15;
  display: flex;
  justify-content: center;
  align-items: center;
}

.yunshang-image {
  max-width: 500px;
  max-height: 100px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  animation: fadeInUp 1s ease-out;
}

/* 功能区域划分 - 透明区域，预留顶部装饰空间，向上移动 */
.function-areas {
  position: fixed;
  top: 100px;  /* 从135px向上移动35px */
  left: 0;
  width: 100%;
  height: calc(100% - 100px);  /* 相应调整高度计算 */
  display: flex;
  z-index: 10;
  pointer-events: none; /* 默认不拦截鼠标事件 */
}

/* 左侧区域 - 垂直三等分 */
.left-area {
  flex: 0 0 27.5%;
  height: 100%;
  display: flex;
  flex-direction: column;  /* 垂直排列 */
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* 允许鼠标交互 */
}

/* 左侧子区域 */
.left-sub-area {
  flex: 1;  /* 改为flex: 1，让三个区域平均分配高度 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;  /* 完全去除间距 */
}

/* 中间区域 */
.center-area {
  flex: 0 0 45%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  pointer-events: auto; /* 允许鼠标交互 */
}

/* 右侧区域 - 垂直三等分 */
.right-area {
  flex: 0 0 27.5%;
  height: 100%;
  display: flex;
  flex-direction: column;  /* 垂直排列 */
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* 允许鼠标交互 */
}

/* 右侧子区域 */
.right-sub-area {
  flex: 1;  /* 改为flex: 1，让三个区域平均分配高度 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;  /* 完全去除间距 */
}


/* 区域内容 - 直接显示图片，无边框 */
.area-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 区域图片样式 - 占比95% */
.area-image {
  max-width: 95%;  /* 从80%调整到95% */
  max-height: 95%; /* 从80%调整到95% */
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  padding: 10px; /* 添加内边距 */
}

/* 区域标题和描述样式已移除 - 不再需要文字内容 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-right-btn {
    top: 15px;
    right: 15px;
    width: 66.5px;  /* 从70px缩小到66.5px (95%) */
    height: 66.5px; /* 从70px缩小到66.5px (95%) */
  }
  
  .top-yunshang {
    top: 15px;
  }
  
      .yunshang-image {
        max-width: 150px;
        max-height: 60px;
      }
      
      /* 平板端图片尺寸调整 */
      .area-image {
        max-width: 90%;  /* 平板端调整为90% */
        max-height: 90%;
      }
  
  .function-areas {
    top: 80px;  /* 平板端也向上移动 */
    height: calc(100% - 80px);
    flex-direction: column;
  }
  
  .left-area,
  .center-area,
  .right-area {
    flex: 0 0 auto;
    width: 100%;
    height: 33.33%;
    margin-bottom: 0;
  }
  
      /* 左侧和右侧子区域在移动端保持垂直排列 */
      .left-sub-area,
      .right-sub-area {
        flex: 1;  /* 改为flex: 1，紧密连接 */
        padding: 0;  /* 完全去除间距 */
      }
}

@media (max-width: 480px) {
  .top-right-btn {
    top: 10px;
    right: 10px;
    width: 57px;  /* 从60px缩小到57px (95%) */
    height: 57px; /* 从60px缩小到57px (95%) */
  }
  
  .top-yunshang {
    top: 10px;
  }
  
      .yunshang-image {
        max-width: 120px;
        max-height: 50px;
      }
      
      /* 手机端图片尺寸调整 */
      .area-image {
        max-width: 85%;  /* 手机端调整为85% */
        max-height: 85%;
      }
  
  .function-areas {
    top: 60px;  /* 手机端也向上移动 */
    height: calc(100% - 60px);
  }
  
  .left-area,
  .center-area,
  .right-area {
    height: 33.33%;
    margin-bottom: 0;
  }
  
      /* 左侧和右侧子区域在手机端保持垂直排列 */
      .left-sub-area,
      .right-sub-area {
        flex: 1;  /* 改为flex: 1，紧密连接 */
        padding: 0;  /* 完全去除间距 */
      }
}
</style>
